<template>
    <van-nav-bar v-show="!isApp" :class="{'m-bg': bg}" :fixed="fixed" :border="border" left-arrow sticky :title="title" :right-text="rightText" @click-left="onClickLeft" @click-right="onClickRight">
        <slot name="title" slot="title"></slot>
        <slot name="right" slot="right"></slot>
    </van-nav-bar>
</template>
<script>
export default {
    props: {
        rightText: {
            type: String,
            default: ''
        },
        fixed: {
            type: Boolean,
            default: false
        },
        border: {
            type: Boolean,
            default: true
        },
        bg: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            title: this.$route.meta.title,
            isApp: this.$store.state.auth.isApp
        }
    },
    mounted() {
        console.log(this.$route)
        window.yangche51AppOnClickRight = () => {
            this.onClickRight();
        }

        try {
            if (isApp) {
                window.yangcheJS.setTitleBar(false,this.title,this.rightText,yangche51AppOnClickRight)
            }
        } catch (err) {

        }
    },
    methods: {
        onClickLeft() {
            history.go(-1);
            this.$emit('click-left');
        },
        onClickRight() {
            this.$emit('click-right');
        },
    }
}
</script>
<style lang="less" scoped>
.m-bg {
    background: #ff0015;
    color: #fff;
    /deep/ .van-nav-bar__title {
        color: #fff;
    }
    /deep/ .van-nav-bar__text {
        color: #fff;
        font-size: 16px;
    }
    /deep/ .van-icon {
        color: #fff;
    }
}
</style>